import InfiniteScroll from "@/components/infiniteScroll";
import MessageDrawer from "@/components/messageDrawer";
import { Avatar, Button, List, Tabs } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
const MyList = ({ data }: { data: any[] }) => {
	const navigate = useNavigate();
	return (
		<List
			itemLayout="vertical"
			size="large"
			dataSource={data}
			renderItem={(item) => (
				<List.Item
					key={item.title}
					extra={
						<img
							width={272}
							alt="logo"
							src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
						/>
					}>
					<List.Item.Meta
						avatar={<Avatar src={item.avatar} />}
						title={
							<span onClick={() => navigate(item.href + item.id)}>
								{item.title}
							</span>
						}
						description={item.description}
					/>
					{item.content}
				</List.Item>
			)}
		/>
	);
};
const Index = () => {
	let key = 1;
	const [data, setData] = useState<any[]>([]);
	const [likeList, setLikeList] = useState<any[]>([]);
	const [collectList, setCollectList] = useState<any[]>([]);
	const [loading, setLoading] = useState(false);
	const [likeLoading, setLikeloading] = useState(false);
	const [collectLoading, setCollectloading] = useState(false);
	const [open, setOpen] = useState(false);
	const loadMoreData = () => {
		console.log("loadMoreData", loading);
		if (loading) {
			return;
		}
		setLoading(true);
		setTimeout(() => {
			const list: {
				id: number;
				href: string;
				title: string;
				avatar: string;
				description: string;
				content: string;
				star: { status: boolean; count: number };
				like: { status: boolean; count: number };
				message: { count: number };
			}[] = [];
			for (let i = 0; i < 10; i++) {
				key += 1;
				list.push({
					id: key,
					href: `/article/`,
					title: `wofabude 标题 ${key}`,
					avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
					description: "描述",
					content: "内容",
					star: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					like: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					message: {
						count: Math.floor(Math.random() * 30),
					},
				});
			}

			setData([...data, ...list]);
			setLoading(false);
		}, 1000);
	};
	const loadCollectLikeList = () => {
		console.log("loadMoreData", loading);
		if (loading) {
			return;
		}
		setCollectloading(true);
		setTimeout(() => {
			const list: {
				id: number;
				href: string;
				title: string;
				avatar: string;
				description: string;
				content: string;
				star: { status: boolean; count: number };
				like: { status: boolean; count: number };
				message: { count: number };
			}[] = [];
			for (let i = 0; i < 10; i++) {
				key += 1;
				list.push({
					id: key,
					href: `/article/`,
					title: `我收藏的 标题 ${key}`,
					avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
					description: "描述",
					content: "内容",
					star: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					like: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					message: {
						count: Math.floor(Math.random() * 30),
					},
				});
			}

			setCollectList([...data, ...list]);
			setCollectloading(false);
		}, 1000);
	};
	const loadMoreLikeList = () => {
		console.log("loadMoreData", loading);
		if (loading) {
			return;
		}
		setLikeloading(true);
		setTimeout(() => {
			const list: {
				id: number;
				href: string;
				title: string;
				avatar: string;
				description: string;
				content: string;
				star: { status: boolean; count: number };
				like: { status: boolean; count: number };
				message: { count: number };
			}[] = [];
			for (let i = 0; i < 10; i++) {
				key += 1;
				list.push({
					id: key,
					href: `/article/`,
					title: `woxihuande 标题 ${key}`,
					avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
					description: "描述",
					content: "内容",
					star: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					like: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					message: {
						count: Math.floor(Math.random() * 30),
					},
				});
			}

			setLikeList([...data, ...list]);
			setLikeloading(false);
		}, 1000);
	};

	const item = [
		{
			label: "我发布的",
			key: "1",
			children: (
				<InfiniteScroll
					key={1}
					data={data}
					loadMoreData={loadMoreData}
					loading={loading}>
					<MyList data={data} />
				</InfiniteScroll>
			),
		},
		{
			label: "我收藏的",
			key: "2",
			children: (
				<InfiniteScroll
					key={2}
					data={data}
					loadMoreData={loadCollectLikeList}
					loading={collectLoading}>
					<MyList data={collectList} />
				</InfiniteScroll>
			),
		},
		{
			label: "我喜欢的",
			key: "3",
			children: (
				<InfiniteScroll
					key={3}
					data={likeList}
					loadMoreData={loadMoreLikeList}
					loading={likeLoading}>
					<MyList data={likeList} />
				</InfiniteScroll>
			),
		},
	];
	const handleChange = () => {
		setData([]);
		setLikeList([]);
		setCollectList([]);
	};
	return (
		<div className={styles.root}>
			<Tabs
				destroyInactiveTabPane={true}
				onChange={handleChange}
				defaultActiveKey="1"
				type="card"
				size={"middle"}
				items={item}
				tabBarExtraContent={{ right: <Button>sdvdv</Button> }}
			/>
			<MessageDrawer
				info={{
					userID: "",
					articleID: "",
				}}
				open={open}
				onClose={() => setOpen(false)}
			/>
		</div>
	);
};

export default Index;
